<template>
   <div class="tool-bar">
       <div class="tool-bar-item" v-for="(item, index) in toolBarData" :key = 'index'
       @click="onChangeFragment(item,index)">
           <img class="tool-bar-item-img" :src="[index === selectItemIndex ? item.hIcon : item.nIcon]">
           <p class="tool-bar-item-name" :class="{'tool-bar-name-h' : index === selectItemIndex}">{{item.name}}</p>
       </div>
   </div>
</template>

<script>
export default {
  data () {
    return {
      toolBarData: [{
        nIcon: require('@imgs/home-n.svg'),
        hIcon: require('@imgs/home-h.svg'),
        name: '首页',
        componentName: 'home'
      }, {
        nIcon: require('@imgs/shopping-n.svg'),
        hIcon: require('@imgs/shopping-h.svg'),
        name: '购物车',
        componentName: 'shopping'
      }, {
        nIcon: require('@imgs/my-n.svg'),
        hIcon: require('@imgs/my-h.svg'),
        name: '我的',
        componentName: 'my'
      }],
      selectItemIndex: 0
    }
  },
  methods: {
    onChangeFragment (item, index) {
      this.selectItemIndex = index
      this.$emit('onChangeFragment', item.componentName)
    },
    /**
     * 指定切换的tab页
     */
    pushFragment (index) {
      // 调用 onChangeFragment 切换对应 的tab
      this.onChangeFragment(this.toolBarData[index], index)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@css/style.scss';
  .tool-bar-name-h{
    color: red;
  }
  .tool-bar {
    width: 100%;
    padding-top: .05rem;
    display: flex;
    justify-content: space-around;
    background-color: white;
    box-shadow: 0 0 16px 0 rgba(0,0,0,0.2);
    border-top: 1px solid #e5e5e5;

    &-item {
      text-align: center;
      padding: px2rem(4) px2rem(12);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &-img {
        width: px2rem(22);
        height: px2rem(22);
      }

      &-name {
        font-size: px2rem(14);
        margin-top: px2rem(3);
      }
    }
  }
</style>
